html {
    font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
    width: 100%;
}

::selection {
    background-color: #eb5055 !important;
}

#login {
    background: url("../img/bg.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -999;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main {
    font-family: Helvetica, sans-serif;
    margin-top: 8%;
    text-align: center;
}

.header {
    padding: 24px 20px;
}
.login-card > .el-card__header {
    background: url("../img/header.png");
    font-size: 15px;
    margin-bottom: 25px;
}

.el-card{
    border: none !important;
}

.header > .item {
    color: #fff;
    font-size: 28px;
}
.btn {
    width: 100%;
    border-radius: 28px;
}

#form {
    padding: 0 30px;
}

.check {
    float: left;
}

.tips {
    font-size: 13px;
    text-align: right;
    color: #409EFE;
    text-decoration: none;
}

.tips:hover {
    color: #3a8ee6;
}
/*动画*/
#login{
    animation-name: fadeInLittleLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0.3s;
}

@-moz-keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeOutDown {
    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeOutDown {
    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeOutDown {
    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeOutDown {
    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInLittleDown {
    from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInLittleDown {
    from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInLittleDown {
    from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInLittleDown {
    from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInLittleLeft {
    from {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInLittleLeft {
    from {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInLittleLeft {
    from {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInLittleLeft {
    from {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeOutLittleLeft {
    to {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeOutLittleLeft {
    to {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeOutLittleLeft {
    to {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeOutLittleLeft {
    to {
        opacity: 0;
        transform: translate3d(-5%, 0, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeOutUp {
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeOutUp {
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeOutUp {
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeOutUp {
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    from {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInLittleRight {
    from {
        opacity: 0;
        transform: translate3d(5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInLittleRight {
    from {
        opacity: 0;
        transform: translate3d(5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInLittleRight {
    from {
        opacity: 0;
        transform: translate3d(5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInLittleRight {
    from {
        opacity: 0;
        transform: translate3d(5%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-20%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-20%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-20%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-20%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-o-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes popUp {
    to {
        transform: translateY(-3%);
    }
    from {
        transform: none;
    }
}
@-webkit-keyframes popUp {
    to {
        transform: translateY(-3%);
    }
    from {
        transform: none;
    }
}
@-o-keyframes popUp {
    to {
        transform: translateY(-3%);
    }
    from {
        transform: none;
    }
}
@keyframes popUp {
    to {
        transform: translateY(-3%);
    }
    from {
        transform: none;
    }
}
@-moz-keyframes translateDownAnouncement {
    to {
        opacity: 1;
        width: 60%;
        left: 20%;
    }
    from {
        opacity: 1;
        transform: translateY(-6.9em);
        width: 100%;
        left: 0;
    }
}
@-webkit-keyframes translateDownAnouncement {
    to {
        opacity: 1;
        width: 60%;
        left: 20%;
    }
    from {
        opacity: 1;
        transform: translateY(-6.9em);
        width: 100%;
        left: 0;
    }
}
@-o-keyframes translateDownAnouncement {
    to {
        opacity: 1;
        width: 60%;
        left: 20%;
    }
    from {
        opacity: 1;
        transform: translateY(-6.9em);
        width: 100%;
        left: 0;
    }
}
@keyframes translateDownAnouncement {
    to {
        opacity: 1;
        width: 60%;
        left: 20%;
    }
    from {
        opacity: 1;
        transform: translateY(-6.9em);
        width: 100%;
        left: 0;
    }
}

/*CSS响应式布局*/
@media screen and (max-device-width: 500px){
    #main{
        margin-top: 45% !important;
    }
}
@media only screen and (max-width: 768px){
    #main{
        margin-top: 29% !important;
    }
}